<script setup>
import { ref, onMounted } from 'vue'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'                // 瓦片图层
import XYZ from 'ol/source/XYZ'
import {ScaleLine} from "ol/control";
const map = ref(null)

/**
 * 初始化地图
 * 创建地图实例并加载天地图瓦片服务
 */
const initMap = () => {
  map.value = new Map({
    target: 'map',  // 挂载到id为'map'的DOM元素
    layers: [
      new TileLayer({
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69'
        })
      })
    ],
    view: new View({
      projection: 'EPSG:4326',  // 使用WGS84坐标系
      zoom: 12,                 // 初始缩放级别
      center: [113.24981689453125, 23.126468438108688]  // 初始中心点坐标
    })
  });
  scaleLineCtl()
}

const scaleLineCtl = ()=>{
  const scaleLineControl = new ScaleLine({
    //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
    units: "metric",
    bar: true,//渲染比例尺而不是一条线
    text: true,//渲染比例尺上方的文本比例。仅适用于baris true
  })
  map.value.addControl(scaleLineControl)
}

onMounted(initMap)
</script>

<template>
  <div id="map"></div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>